import React from 'react';
import './shouye.scss'
import { Card ,Row, Col,Button} from 'antd';
import {Link} from 'react-router-dom';

import axios from 'axios';

const { Meta } = Card;
class Main extends React.Component{
	constructor() {
		super();
		this.state = {
			startx:false,
			sjh:'',
			titldata:[]
		}

	}
	faapi(){
		axios.get("http://192.168.150.91:8080/jeecg-boot/test/jeecgDemo/arrestList").then(res=>{
			this.setState({
				titldata:res.data.result
			})
		})
	}
	componentWillMount(){
		this.faapi()
	}
    handeChange(item,event){
        for(let StateItem in this.state){
            if(item===StateItem){
                this.state[item]=event.target.value;
                this.setState(this.state)
            }
        }
	}

	onsapi(){
		axios.post("http://192.168.150.91:8080/jeecg-boot/test/jeecgDemo/arrestAdd",{dateTime:this.state.sjh}).then((res)=>{
			this.setState({
				sjh:''
			})
			this.faapi()
		})
	}
	handleLogoutClick(){
		this.setState({
			startx: !this.state.startx
		  }, () => {
			console.log(this.state.startx) // 更新后的值222
		  })
	}
	render(){
		const {startx,titldata} = this.state
		let GuestGreeting
		if(startx){
			GuestGreeting=
			<div>
				<div className="heardtitdata">保安出没时间</div>
				{
					titldata.map(item=>{
						return(
							<div className="mdui-chip" key={item.dateTime}>
								<span className="mdui-chip-title">{item.dateTime}</span>
							</div>	
						)
					})
				}
			</div>
		}else{
			GuestGreeting=
			<div>
				<div className="mdui-textfield mdui-textfield-floating-label">
					<label className="mdui-textfield-label">输入保安出没时间</label>
					<input className="mdui-textfield-input" onChange={this.handeChange.bind(this,"sjh")} value={this.state.sjh} type="email"/>
				</div>
				<Button onClick={this.onsapi.bind(this)} type="primary" block ghost>保存</Button>
			</div>
		}
		return (
			<div className="heards">
			{/* <div className="heardtitdata">欢迎来到开发者世界</div> */}
			<div className="mdui-card">
				<div className="mdui-card-media">
					<img src="http://cdn.w3cbus.com/mdui.org/docs/assets/docs/img/card.jpg!webp"/>
					<div className="mdui-card-media-covered">
						<div className="mdui-card-primary">
							<div className="mdui-card-primary-title">开发者</div>
							<div className="mdui-card-primary-subtitle">前端：邹志林 | 后端：刘丁铭|洪升奇|申河君</div>
							<div className="mdui-card-primary-subtitle">测试：赵志平（赵总） | 设计：空</div>
						</div>
							<div className="mdui-card-actions">
								<button className="mdui-btn mdui-ripple mdui-ripple-white">REACT</button>
								<button className="mdui-btn mdui-ripple mdui-ripple-white">JAVA</button>
							</div>
					</div>
				</div>
			</div>
			<div className="fgexian"></div>
			<div className="huoxinggun">
				<Row className="rowkapian">
					<Col span={10} onClick={this.handleLogoutClick.bind(this)}>
						<Card
						hoverable
						style={{ width: 155 }}
						cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
						>
						<Meta title="抽烟" description="这个需求不太明确" />
						</Card>
					</Col>
					<Link to="/Xianzhelt">
						<Col span={10} >
							<Card
							hoverable
							style={{ width: 155 }}
							cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
							>
							<Meta title="闲者聊天室" description="使用实时通讯实现聊天室功能" />
							</Card>
						</Col>
					</Link>
				</Row>
				{GuestGreeting}
			 </div>
			</div>
		)
	}
}
export default Main;